<template>
  <div class="hot_rank_box">
    <search
      v-model="valueSerach"
      :active="active"
      @returnBack="returnBack"
      @returnBack1="returnBack1"
    />
    <div>
      <van-tabs
        :offset-top="$tabNavTopVal"
        v-model="active"
        title-active-color="#222"
        title-inactive-color="#888"
        sticky
        swipeable
        swipe-threshold="3"
      >
        <van-tab title="热门视频榜">
          <HotVideo :newvalue1="newvalue1" v-if="active == 0" ref="refs1" />
        </van-tab>
        <van-tab title="热门音乐榜">
          <HotMusic :newvalue1="newvalue1" v-if="active == 1" ref="refs2" />
          <!-- <HotMusic :newvalue1="newvalue1" v-if="active == 1" ref="refs" /> -->
        </van-tab>
        <van-tab title="热门话题榜">
          <HotTopic :newvalue1="newvalue1" v-if="active == 2" ref="refs3" />
          <!-- <HotTopic :newvalue1="newvalue1" v-if="active == 2" ref="refs2" /> -->
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import search from '@/component/search';
import HotVideo from './hotVideo.vue';
import HotMusic from './hotMusic.vue';
import HotTopic from './hotTopic.vue';
// import HotMusic from './hotMusic.vue';
// import HotTopic from './hotTopic.vue';
export default {
  name: 'hotRankBox',
  // components: { , HotMusic, HotTopic, search },
  components: { HotVideo,HotMusic,HotTopic,search },
  data() {
    return {
      active: 0,

      valueSerach: '',
      newvalue1: ''
    };
  },
  computed: {},
  activated() {
    if (this.$route.query.tab != undefined) {
      this.active = Number(this.$route.query.tab);
    }
  },
  watch: {
    // active(newValue) {
    //   this.valueSerach = '';
    // },
    // valueSerach(newValue) {
    //   //  this.newvalue1=newValue
    //   this.valueSerach = this.trimStr(newValue);
    //   if (this.active == 0) {
    //     this.$refs.refs1.search(this.valueSerach);
    //   } else if (this.active == 1) {
    //     this.$refs.refs.search(this.valueSerach);
    //   } else {
    //     this.$refs.refs2.search(this.valueSerach);
    //   }
    // },
    active(newvalue) {
      this.valueSerach = '';
      if (window.pageYOffset != 0) {
        window.pageYOffset = 1;
      }
    }
  },
  created() {
    let tabNum = this.$route.query.tab;
    if(tabNum){
      this.active = Number(tabNum);
    }
  },
  mounted() {},

  methods: {
    returnBack(a) {
      this.valueSerach = this.trimStr(a);
      if (this.active == 0) {
        this.$refs.refs1.searchFn(this.valueSerach);
      } else if (this.active == 1) {
        this.$refs.refs2.searchFn(this.valueSerach);
      } else {
        this.$refs.refs3.searchFn(this.valueSerach);
      }
    },
    returnBack1(a) {
      if(a){
        if (this.active == 0) {
          this.$refs.refs1.searchFn(a);
        } else if (this.active == 1) {
          this.$refs.refs2.searchFn(a);
        } else {
          this.$refs.refs3.searchFn(a);
        }
      }
    }

    //     搜索框
    // search() {
    //   this.valueSerach = this.trimStr(this.valueSerach);
    //   if (this.active == 0) {
    //     this.$refs.refs1.search(this.valueSerach);
    //   } else if (this.active == 1) {
    //     this.$refs.refs.search(this.valueSerach);
    //   } else {
    //     this.$refs.refs2.search(this.valueSerach);
    //   }
    // },
    // navToSearch() {
    //   this.valueSerach = this.trimStr(this.valueSerach);
    //   if (this.active == 0) {
    //     this.$refs.refs1.search(this.valueSerach);
    //   } else if (this.active == 1) {
    //     this.$refs.refs.search(this.valueSerach);
    //   } else {
    //     this.$refs.refs2.search(this.valueSerach);
    //   }
    // },
  }
};
</script>
<style lang='less' scoped>
//@import url();
.hot_rank_box {
  background: #f1f1f1;
  min-height:100vh;
  #sear {
  }
}
</style>